<div id="content" ng-controller='GameController as ctrl'>
  <!-- heading -->
  <div id="heading" class="row">
    <h1 class="title">ng-2048</h1>
    <div class="scores-container">
      <div class="score-container">{{ctrl.game.currentScore}}</div>
      <div class="best-container">{{ctrl.game.highScore}}</div>
    </div>
  </div>

  <!-- instructions -->
  <div id="instructions" class="row">
    Join the numbers and get to the <strong>2048</strong> tile!
    <button ng-click='ctrl.newGame()' class="restart-button">New game</button>
  </div>
  
  <div id="game-container">
    <div grid ng-model='ctrl.game' class="row"></div>

    <div id="game-over" ng-if="ctrl.game.gameOver" class="row game-overlay">
      Game over

      <div class="lower">
        <a class="retry-button" ng-click='ctrl.newGame()'>Try again</a>
      </div>
    </div>

    <div id="win" ng-if="ctrl.game.win" class="row game-overlay">
      You win!

      <div class="lower">
        <a class="retry-button" ng-click='ctrl.newGame()'>Try again</a>
      </div>
    </div>
  </div>

  <p class="game-explanation">
    <strong class="important">How to play:</strong> Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
  </p>
  <hr>

  <p>
    <strong class="important">NOTE:</strong> This game was written using AngularJS.
  </p>

  <hr>

  <p>
    Created by <a href="http://fullstackedu.com">Fullstack.io</a> based on 2048 by <a href="http://gabrielecirulli.com" target="_blank">Gabriele Cirulli.</a> Based on <a href="https://itunes.apple.com/us/app/1024!/id823499224" target="_blank">1024 by Veewo Studio</a> and conceptually similar to <a href="http://asherv.com/threes/" target="_blank">Threes by Asher Vollmer.</a>
  </p>

</div>
